<template>
  <div class="find">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed />
    <div class="search">
      <div class="item">
        <p class="p1" @click="$router.push(`/city/${currentCity}`)">
          {{ currentCity }}
        </p>
        <div class="p2">
          <van-icon name="search" />
          <van-field
            v-model="community"
            placeholder="请输入城市名:北京"
            class="search1"
            @keydown.enter="searchCommunity"
          />
        </div>
      </div>
      <div class="maps"><van-icon name="guide-o" size="25px" /></div>
    </div>
    <div class="filter">
      <div @click="showPicker = true">区域</div>
      <div>方式</div>
      <div>租金</div>
      <div @click="showPopup">筛选</div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </van-popup>

    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '75%' }"
    >
      <van-tree-select
        height="35vw"
        :items="roomType"
        :active-id.sync="activeIds1"
        class="tree"
      >
      </van-tree-select>
       <van-tree-select
        height="35vw"
        :items="oriented"
        :active-id.sync="activeIds2"
        class="tree"
      >
      </van-tree-select>
      <van-tree-select
        height="35vw"
        :items="floor"
        :active-id.sync="activeIds3"
      >
      </van-tree-select>
    </van-popup>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <huose-item v-for="item in houseList" :key="item.id" :item="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { filterHouse, getHouse } from '@/api/house'
import HuoseItem from '@/components/HuoseItem.vue'
import { searchCity, sonCity } from '@/api/city'

export default {
  components: { HuoseItem },
  name: 'find-page',
  data () {
    return {
      houseList: [],
      loading: false,
      finished: false,
      cur_page: 1,
      refreshing: false,
      community: '',
      currentCity: localStorage.getItem('currentCity'),
      active: 1,
      showPicker: false,
      columns: [],
      show: false,
      activeIds1: [],
      roomType: [
        {
          text: '户型',
          className: 'my-roomtype',
          children: [{ text: '一室', id: 1 }, { text: '二室', id: 2 }, { text: '三室', id: 3 }, { text: '四室', id: 4 }, { text: '四室+', id: 5 }]
        }
      ],
      activeIds2: [],
      oriented: [
        {
          text: '朝向',
          className: 'my-oriented',
          children: [{ text: '东', id: 1 }, { text: '南', id: 2 }, { text: '西', id: 3 }, { text: '北', id: 4 }, { text: '东南', id: 5 }]
        }
      ],
      activeIds3: [],
      floor: [
        {
          text: '楼层',
          className: 'my-floor',
          children: [{ text: '高楼层', id: 1 }, { text: '中楼层', id: 2 }, { text: '低楼层', id: 3 }]
        }
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async onLoad () {
      const res = await getHouse({ cur_page: this.cur_page })
      console.log(res)
      this.loading = false
      this.cur_page++
      const list = res.body
      if (res.status !== 400) {
        list.forEach((item) => {
          item.houseImg = 'http://liufusong.top:8080' + item.houseImg
        })
        this.houseList.push(...list)
      } else {
        this.loading = true
        this.$toast(res.description)
        this.$router.push('/login')
      }

      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    searchCommunity () {
      this.$router.push(`search/${this.community}`)
    },

    async onConfirm (values) {
      this.value = values
      this.showPicker = false
      const res = await searchCity(values)
      const res3 = await filterHouse(res.body.value)

      if (res3.body.list) {
        res3.body.list.forEach((item) => {
          item.houseImg = 'http://liufusong.top:8080' + item.houseImg
        })
      }
      this.houseList = res3.body.list
    },
    showPopup () {
      this.show = true
    }
  },
  async created () {
    const res = await searchCity(this.currentCity)
    const res1 = await sonCity(res.body.value)
    res1.body.forEach((item) => {
      this.columns.push(item.label)
    })
  }
}
</script>

<style lang="less" scoped>
.find {
  position: relative;
  margin-bottom: 60px;
  margin-top: 50px;
  .search {
    .item {
      position: fixed;
      left: 50%;
      top: 6px;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      align-items: center;
      width: 274px;
      height: 34px;
      background-color: #fff;
      .p1 {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        align-items: center;
        margin-left: 30px;
        padding-left: 15px;
        border-left: 1px solid #000;
        height: 19px;
        font-size: 14px;
        .search1 {
          width: 150px;
          height: 34px;
        }
      }
    }
    .maps {
      position: fixed;
      top: 10px;
      right: 12px;
      z-index: 999;
    }
  }
  .filter {
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      width: 60px;
      height: 30px;
      background-color: #ccc;
      text-align: center;
      line-height: 30px;
    }
  }
  .tree {
    margin-bottom: 30px;
    border: 1px solid #ccc;
    padding-bottom: 30px;
  }
}
</style>
